<template>
	<view class="container container28449">
		<view class="flex flex-wrap diygw-col-24 justify-around items-start green flex-clz">
			<view class="flex flex-wrap diygw-col-0 items-center">
				<text class="flex icon6 diygw-col-0 icon6-clz diy-icon-safe"></text>
				<view class="diygw-col-0 text6-clz"> 实时更新 </view>
			</view>
			<view class="flex flex-wrap diygw-col-0 items-center">
				<text class="flex icon1 diygw-col-0 icon1-clz diy-icon-light"></text>
				<view class="diygw-col-0 text1-clz"> 极速响应 </view>
			</view>
			<view class="flex flex-wrap diygw-col-0 items-center">
				<text class="flex icon diygw-col-0 icon-clz diy-icon-wefill"></text>
				<view class="diygw-col-0 text-clz"> 公益服务 </view>
			</view>
		</view>
		
		<view class="flex flex-wrap diygw-col-24 flex-direction-column flex3-clz">
			<view class="diygw-col-24 text2-clz"> 身高（米） </view>
			<u-form-item labelWidth="auto" :borderBottom="false" class="diygw-col-24 input-clz diygw-form-item-small" labelPosition="top" prop="input">
				<u-input :focus="inputFocus" class="" placeholder="" v-model="input" type="text"></u-input>
			</u-form-item>
			<view class="flex diygw-col-24 line3-clz">
				<view class="diygw-pzx" style="border-bottom: 1px solid #cccccc"></view>
			</view>
			<view class="diygw-col-24 text2-clz"> 体重（千克） </view>
			<u-form-item labelWidth="auto" :borderBottom="false" class="diygw-col-24 input-clz diygw-form-item-small" labelPosition="top" prop="input">
				<u-input :focus="inputFocus" class="" placeholder="" v-model="input2" type="text"></u-input>
				<button @tap="navigateTo" data-type="bmiApi" class="diygw-tag radius-xs green">查询</button>
			</u-form-item>
		</view>
		<view class="flex flex-wrap diygw-col-24 flex-direction-column flex48-clz">
			<view class="flex flex-wrap diygw-col-0 items-center" open-type="contact">
				<view class="diygw-col-0 text52-clz"> 使用小程序过程中有问题？ </view>
				<view class="diygw-col-0"> 联系客服咨询 </view>
				<text class="flex icon5 diygw-col-0 diy-icon-right"></text>
			</view>
		</view>

		<view class="clearfix"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//用户全局信息
				userInfo: {},
				//页面传参
				globalOption: {},
				//自定义全局变量
				globalData: {},
				icp: ``,
				inputFocus: false,
				input: '',
				input2: ''
			};
		},
		onShow() {
			this.setCurrentPage(this);
		},
		onLoad(option) {
			this.setCurrentPage(this);
			if (option) {
				this.setData({
					globalOption: this.getOption(option)
				});
			}

			this.init();
		},
		methods: {
			async init() {},
			// ICP接口 API请求方法
			async bmiApi(param) {
				let thiz = this;
				param = param || {};

				let bmi = await this.$http.get('/api/bmi?height='+this.input+'&weight='+this.input2);

				this.bmi = bmi;
				if (bmi.code == '200') {
					uni.showModal({
						title: '查询成功',
						content: 'BMI：'+bmi.data.bmi + '\n状态：' + bmi.data.status
					});
				} else {
					uni.showToast({
						title: '查询失败！',
						icon:'error'
					});
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.flex-clz {
		padding-top: 40rpx;
		padding-left: 0rpx;
		padding-bottom: 0rpx;
		height: 160rpx;
		padding-right: 0rpx;
	}
	.icon6-clz {
		margin-left: 0rpx;
		margin-top: 0rpx;
		margin-bottom: 0rpx;
		margin-right: 6rpx;
	}
	.icon6 {
		font-size: 32rpx;
	}
	.text6-clz {
		font-weight: bold;
	}
	.icon1-clz {
		margin-left: 0rpx;
		margin-top: 0rpx;
		margin-bottom: 0rpx;
		margin-right: 6rpx;
	}
	.icon1 {
		font-size: 32rpx;
	}
	.text1-clz {
		font-weight: bold;
	}
	.icon-clz {
		margin-left: 0rpx;
		margin-top: 0rpx;
		margin-bottom: 0rpx;
		margin-right: 6rpx;
	}
	.icon {
		font-size: 32rpx;
	}
	.text-clz {
		font-weight: bold;
	}
	.flex3-clz {
		padding-top: 20rpx;
		border-bottom-left-radius: 30rpx;
		padding-left: 20rpx;
		padding-bottom: 20rpx;
		border-top-right-radius: 30rpx;
		margin-right: 40rpx;
		background-color: #ffffff;
		margin-left: 40rpx;
		overflow: hidden;
		width: calc(100% - 40rpx - 40rpx) !important;
		border-top-left-radius: 30rpx;
		margin-top: -50rpx;
		border-bottom-right-radius: 30rpx;
		margin-bottom: 0rpx;
		padding-right: 20rpx;
	}
	.text2-clz {
		padding-top: 10rpx;
		color: #a0a0a0;
		padding-left: 20rpx;
		padding-bottom: 10rpx;
		padding-right: 20rpx;
	}
	.input-clz {
		padding-top: 10rpx;
		font-weight: bold;
		padding-left: 0rpx;
		font-size: 36rpx !important;
		padding-bottom: 10rpx;
		padding-right: 0rpx;
	}
	.flex48-clz {
		padding-top: 20rpx;
		border-bottom-left-radius: 30rpx;
		padding-left: 20rpx;
		padding-bottom: 20rpx;
		border-top-right-radius: 30rpx;
		margin-right: 40rpx;
		background-color: #ffffff;
		margin-left: 40rpx;
		overflow: hidden;
		width: calc(100% - 40rpx - 40rpx) !important;
		border-top-left-radius: 30rpx;
		margin-top: 30rpx;
		border-bottom-right-radius: 30rpx;
		margin-bottom: 0rpx;
		padding-right: 20rpx;
	}
	.text52-clz {
		color: #7f7e7e;
	}
	.icon5 {
		font-size: 32rpx;
	}
	.container28449 {
		padding-left: 0px;
		padding-right: 0px;
		background-color: #f3f4f6;
	}
	.diy-item-select {
		background-color: inherit;
		color: #07c160;
		background-image: linear-gradient(45deg, #f5fdf9 1%, #ebfdf4 99%);
	}
	.diy-item-remark {
		color: #07c160;
	}
	.container28449 {
	}
</style>
